import React, {Component} from 'react';
import BaseOpts from '../BaseOpts';
import './index.css';
import {InputNumber, Slider, Radio, Select, Upload, Icon, Checkbox} from 'antd';
import SlideInput from '../../common/SlideInput/index';

class NearShopOpts extends BaseOpts {

    static defaultProps = {
        data: {
            style: {},
            dataset: {},
            layout: {}
        }
    };


    constructor(props) {
        super(props);

        this.state = {
            data: props.data
        };

    }

    render() {
        var {style, dataset, layout} = this.state.data;
        var marginTop = parseFloat(style.marginTop || 0);
        var marginBottom = parseFloat(style.marginBottom || 0);

        return (
            <div className="optsPanel">

                {/*<div className="optsPanel__item">*/}
                {/*<label className="optsPanel__item__hd">展示方式</label>*/}
                {/*<div className="optsPanel__item__bd">*/}
                {/*<RadioGroup*/}
                {/*onChange={(e) => {*/}
                {/*var val = e.target.value;*/}
                {/*this._dataChange('showType', val, 'layout');*/}
                {/*if (val == 0) {*/}
                {/*this._dataChange('height', 'auto', 'style');*/}
                {/*} else {*/}
                {/*this._dataChange('height', (parseInt(style.height) || 320) + 'px', 'style');*/}
                {/*}*/}
                {/*}}*/}
                {/*defaultValue={layout.showType || '0'}*/}
                {/*>*/}
                {/*<Radio value="0">最近门店</Radio>*/}
                {/*<Radio value="1">地图</Radio>*/}
                {/*</RadioGroup>*/}
                {/*</div>*/}
                {/*</div>*/}

                {
                    layout.showType == 1 ?
                        (
                            <div className="optsPanel__item">
                                <label className="optsPanel__item__hd">高度</label>
                                <div className="optsPanel__item__bd">
                                    <InputNumber
                                        min={0}
                                        defaultValue={parseInt(style.height) || 0}
                                        onChange={(val) => {
                                            this.$dataChange('height', val + 'px', 'style');
                                        }}/>
                                </div>
                            </div>
                        )
                        : null
                }

                <div className="optsPanel__item">
                    <label className="optsPanel__item__hd">上外边距</label>
                    <div className="optsPanel__item__bd">
                        <SlideInput step={1} min={0} max={100} defaultValue={0} value={marginTop} onChange={(val) => {
                            this.$dataChange('marginTop', val + 'px', 'style');
                        }}/>
                    </div>
                </div>

                <div className="optsPanel__item">
                    <label className="optsPanel__item__hd">下外边距</label>
                    <div className="optsPanel__item__bd">
                        <SlideInput step={1} min={0} max={100} defaultValue={marginBottom} value={marginBottom}
                                    onChange={(val) => {
                                        this.$dataChange('marginBottom', val + 'px', 'style');
                                    }}/>
                    </div>
                </div>

                <div className="optsPanel__item">
                    <div className="optsPanel__item__bd">
                        <a href="/admin/XcxConfig/nearbyStoresList" target="_blank"
                           className="ant-btn-dataMng ant-btn ant-btn-primary ant-btn-lg">数据管理</a>
                    </div>
                </div>
            </div>
        );
    }
}

export default NearShopOpts;
